<template>
  <div class="box">
    <div class="container" ref="containerRef"> </div>
    <el-drawer v-if="drawer" v-model="drawer" title="节点属性样式">
      <el-form :model="form" label-width="auto" style="max-width: 600px">

        <el-form-item label="名称">
          <el-input v-model="form.name" :readonly="true" />
        </el-form-item>
        <el-form-item label="文案" v-if="!form.text1">
          <el-input v-model="form.text" />
        </el-form-item>
        <div v-else>
          <el-form-item label="起始节点">
            <el-input v-model="form.text" />
          </el-form-item>
          <el-form-item label="指向节点">
            <el-input v-model="form.text1" />
          </el-form-item>
        </div>

        <el-form-item label="x">
          <el-input v-model="form.x" />
        </el-form-item>
        <el-form-item label="y">
          <el-input v-model="form.y" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>

import CustomRect, { startNode, resultNode } from "@/components/startNode";
import CustomDiamon, { apiNode } from "@/components/apiNode";
import IconNode from "@/components/iconNode";
import { num1Node, num2Node } from "@/components/num";
import {
  startToNum1, startToNum2, num1ToOperation, num2ToOperation, operationToResult, resultToapi
} from "@/components/edges";
import { operationNode, operationNode1, operationNode2, operationNode3, operationNode4, data as ids } from "@/components/nodes";
import {
  ref,
  onMounted,
  reactive,
  watch,
  onBeforeUnmount
} from 'vue';
import logicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { Menu } from "@logicflow/extension";
import { getSum, setSum } from "@/api/index";
import { ElMessage } from 'element-plus'
// 使用ref函数创建响应式引用
const containerRef = ref(null);
const timer = ref(null);
let lf = null;
let drawer = ref(false)
//表单数据
const form = reactive({
  id: '',
  name: '',
  text: '',
  text1: '',
  y: '',
  x: '',
})
const data = reactive({
  num1: 1,
  num2: 2,
  sum: 3,
  compute: ''
})
//判断是否为数字
function isNumber(value) {
  return !isNaN(value);
}
const onSubmit = (res) => {
  console.log(res);
  lf.updateText(form.id, form.text)
  // lf.changeNodeId(form.id, form.name)
  drawer.value = false
}
const setBgColor = (eventObject) => {
  console.log(ids);
  ids.forEach(c => {
    lf.setProperties(c, {
      style: {
        fill: '#ffffff'
      }
    })
  })
  if (eventObject.data.id) {
    lf.setProperties(eventObject.data.id, {
      style: {
        fill: 'rgb(190 224 251)'
      }
    })
  }


}
const jisuan = () => {
  if (!isNumber(data.num1) || !isNumber(data.num2) || !data.compute) return
  switch (data.compute) {
    case "+":
      data.sum = data.num1 + data.num2;
      break;
    case "-":
      data.sum = data.num1 - data.num2;
      break;
    case "*":
      data.sum = data.num1 * data.num2;
      break;
    case "/":
      data.sum = data.num1 / data.num2;
      break;
    default:
      break;
  }
  lf.updateText('result', data.sum)
  setSum({
    num1: data.num1,
    num2: data.num2,
    compute: data.compute,
    sum: data.sum
  }).then(ret => {
    console.log(ret);

    if (ret.code === 200) {
      ElMessage({
        message: ret.msg,
        type: 'success',
        plain: true,
      })
    } else {
      ElMessage({
        message: ret.msg,
        type: 'error',
        plain: true,
      })
    }
  }).catch(err => {
    ElMessage({
      message: '保存失败',
      type: 'error',
      plain: true,
    })
  })

}
onMounted(() => {
  // 访问DOM元素
  const container = containerRef.value;

  // 初始化logicFlow实例，并将DOM元素作为容器传递
  lf = new logicFlow({
    container: container,
    grid: true,
    stopScrollGraph: true,
    stopZoomGraph: true,
    plugins: [Menu],
  });

  //注册
  lf.register(CustomRect);
  lf.register(CustomDiamon);
  lf.register(IconNode);
  lf.extension.menu.setMenuConfig({
    nodeMenu: [

    ],
    edgeMenu: [

    ],
    graphMenu: [
      {
        text: '创建节点',
        callback() {
          //创建节点相关代码
          console.log('创建节点');
        },
      },
      {
        text: '编辑节点',
        callback() {
          //编辑节点相关代码
          console.log('编辑节点');

        },
      },
    ],
  })
  lf.render({});
  lf.addNode(startNode);
  lf.addNode(apiNode);
  // lf.addNode(apiNode1);
  lf.addNode(num1Node);
  lf.addNode(num2Node);
  lf.addNode(operationNode);
  lf.addNode(operationNode1);
  lf.addNode(operationNode2);
  lf.addNode(operationNode3);
  lf.addNode(operationNode4);
  lf.addNode(resultNode);

  lf.addEdge(startToNum1);
  lf.addEdge(startToNum2);
  lf.addEdge(num1ToOperation);
  lf.addEdge(num2ToOperation);
  lf.addEdge(operationToResult);
  lf.addEdge(resultToapi);

  timer.value = setInterval(() => {
    const num1 = parseFloat(lf.getNodeDataById('num1').text.value)
    const num2 = parseFloat(lf.getNodeDataById('num2').text.value)

    if (!isNumber(num1) || !isNumber(num2)) {
      ElMessage({
        message: '输入的不是数字',
        type: 'error',
        plain: true,
      })
      // 无法转化为数字   asd123
      lf.updateText('num1', data.num1);
      lf.updateText('num2', data.num2)
      return
    }
    data.num1 = num1
    data.num2 = num2;
    // 可以转化为数字，但是数据不一致 123asd
    lf.updateText('num1', data.num1);
    lf.updateText('num2', data.num2)
  }, 2000)
  //右击节点右侧出现节点属性
  lf.on('node:contextmenu', (eventObject) => {
    console.log('node:contextmenu', eventObject);
    form.name = eventObject.data.id
    form.id = eventObject.data.id
    form.text = eventObject.data.text.value
    form.x = eventObject.data.x
    form.y = eventObject.data.y

    drawer.value = true
  });
  ////右击边右侧出现边属性
  lf.on('edge:contextmenu', (eventObject) => {
    console.log('edge:contextmenu', eventObject);
    form.name = eventObject.data.id
    form.text = eventObject.data.sourceNodeId
    form.text1 = eventObject.data.targetNodeId
    form.x = eventObject.data.endPoint.x
    form.y = eventObject.data.endPoint.y
    drawer.value = true
  });

  lf.on('node:click', (eventObject) => {
    console.log('node:click', eventObject, data);

    switch (eventObject.data.text.value) {
      case "+":
      case "-":
      case "*":
      case "/":
        data.compute = eventObject.data.text.value
        setBgColor(eventObject)
        break;
      default:
        break;
    }

    switch (eventObject.data.id) {
      case "start":
        jisuan()
        break;
      default:
        break;
    }
  });
})
onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

</script>

<style>
.uml-wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 10px;
}

.uml-head {
  font-weight: bold;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

.uml-body {
  padding: 5px 10px;
  font-size: 12px;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.uml-footer {
  padding: 5px 10px;
  font-size: 14px;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
}

.box {
  position: relative;

}

.container {
  width: 98vw;
  height: 98vh;
}

.lf-menu {
  position: absolute;
  padding: 10px 20px;
  border: 1px solid rgb(6, 6, 6);
  border-radius: 10px;
  list-style: none;
  margin: 0;
  display: none;
}

.lf-menu li:first-child {
  margin-bottom: 10px;
}

.detail {
  position: absolute;
}
</style>